<!-- 组件内容 -->
<template>
	<view class="audio-page">
		<view class="box-left" @tap="plays">
			<view class="flex items-center" v-if="isMusicPlay">
				<view class="w-[4rpx] h-[22rpx] bg-white rounded-[2rpx] mr-[8rpx]"></view>
				<view class="w-[4rpx] h-[22rpx] bg-white rounded-[2rpx]"></view>
			</view>
			<view class="triangle" v-else></view>
		</view>
		<view class="box-content">
			<view class="progress">
				<slider
					@change="sliderChange"
					@changing="sliderChanging"
					class="audio-slider"
					block-size="16"
					:min="0"
					:max="duration"
					:value="currentTime"
					activeColor="#34A4E2"
					@touchstart="lock = true"
					@touchend="lock = false"
				></slider>
				<view class="px-[32rpx] box-border">
					<text>{{ timer }}</text>
					<text>/</text>
					<text v-if="overTimer != 'NaN:NaN'">{{ overTimer }}</text>
					<text v-else>00.00</text>
				</view>
			</view>
		</view>
		<video
			id="myVideo"
			ref="myVideo"
			:src="src"
			@timeupdate="timeupdate"
			:autoplay="autoPlay"
			@loadedmetadata="loadedmetadata"
			controls
			class="w-[200rpx] h-[100rpx] absolute -z-1"
		></video>
	</view>
</template>

<script>
export default {
	name: 'cx-audio-play',

	props: {
		src: {
			// 音频数据

			Type: String,

			default: '',
		},

		autoPlay: {
			// 是否开启自动播放

			Type: Boolean,

			default: false,
		},

		slideYes: {
			// 滑动进度条 - 是否开启播放

			Type: Boolean,

			default: false,
		},
	},

	data() {
		return {
			isMusicPlay: false, // 播放按钮

			num: 0,

			lock: false, // 锁

			currentTime: 0, // 当前进度

			duration: 100, // 总进度

			videoContext: null,

			loading: true, // 锁 加载
		};
	},

	onShow() {},

	created() {},

	mounted() {
		this.videoContext = uni.createVideoContext('myVideo', this);
		if (this.autoPlay) {
			this.$nextTick(() => {
				this.isMusicPlay = true;
			});
		}
	},

	updated() {},

	onLoad() {},

	onHide() {
		// 监听页面离开 - 销毁音频

		// #ifdef H5

		this.$refs.myVideo.stop();

		// #endif

		// #ifndef H5

		this.videoContext.stop();

		// #endif
	},

	onUnload() {
		// 监听页面卸载 - 销毁音频

		// #ifdef H5

		this.$refs.myVideo.stop();

		// #endif

		// #ifndef H5

		this.videoContext.stop();

		// #endif
	},

	unmounted() {
		// this.innerAudioContext.stop();
	},

	computed: {
		timer() {
			return calcTimer(this.currentTime);
		},

		overTimer() {
			return calcTimer(this.duration);
		},
	},

	watch: {},

	methods: {
		plays() {
			// 播放暂停
			if (!this.src) {
				console.log('暂无音频数据~');

				return;
			}
			this.videoContext = uni.createVideoContext('myVideo', this);
			this.isMusicPlay = !this.isMusicPlay;
			if (this.isMusicPlay) {
				// this.currentTime = 0

				// console.log('-----------------')

				// #ifdef H5

				this.$refs.myVideo.play();

				// #endif

				// #ifndef H5

				this.videoContext.play();

				// #endif
			} else {
				// #ifdef H5

				this.$refs.myVideo.pause();

				// #endif

				// #ifndef H5

				this.videoContext.pause();

				// #endif
			}
		},

		// 更新进度条

		timeupdate(event) {
			if (this.lock) return; // 锁

			let currentTime;
			let duration;

			if (event.detail.detail) {
				currentTime = event.detail.detail.currentTime;

				duration = event.detail.detail.duration;
			} else {
				currentTime = event.detail.currentTime;

				duration = event.detail.duration;
			}

			this.currentTime = currentTime;

			this.duration = duration;
		},

		// 拖动进度条

		sliderChange(data) {
			// 此处滑动进度条--开始播放

			if (this.slideYes && !this.isMusicPlay) {
				// #ifdef H5

				this.$refs.myVideo.play();

				// #endif

				// #ifndef H5

				this.videoContext.play();

				// #endif

				this.isMusicPlay = true;
			}

			// #ifdef H5

			this.$refs.myVideo.seek(data.detail.value); // 获取秒数

			// #endif

			// #ifndef H5

			this.videoContext.seek(data.detail.value); // 获取秒数

			// #endif
		},

		// 拖动中

		sliderChanging(data) {
			if (data.detail.value === 0) {
				this.isMusicPlay = false;
				// #ifdef H5
				this.$refs.myVideo.pause();
				// #endif
				// #ifndef H5
				this.videoContext.pause();
				// #endif
			}
			this.currentTime = data.detail.value;
		},
		// 视频加载完成
		loadedmetadata(data) {
			this.duration = data.detail.duration;
		},
	},
};

// 时间换算

function calcTimer(timer) {
	if (timer === 0 || typeof timer !== 'number') {
		return '00:00';
	}

	let mm = Math.floor(timer / 60);

	let ss = Math.floor(timer % 60);

	if (mm < 10) {
		mm = `0${mm}`;
	}

	if (ss < 10) {
		ss = `0${ss}`;
	}

	return `${mm}:${ss}`;
}
</script>

<style lang="scss" scoped>
.audio-page {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 90rpx;
	background-color: rgb(70 70 70 / 80%);
	border-radius: 26rpx;

	.triangle {
		width: 0;
		height: 0;
		border-top: 12rpx solid transparent;
		border-right: 12rpx solid transparent;
		border-bottom: 12rpx solid transparent;
		border-left: 19rpx solid #fff;
	}

	.box-left {
		position: relative;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		width: 100rpx;
		padding: 20rpx 0;

		image {
			width: 19rpx;
			height: 27rpx;
		}
	}

	.box-content {
		box-sizing: border-box;
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: center;
		width: 100%;
		height: 100%;
		font-size: 3.2vmin;

		.content-name {
			display: -webkit-box;
			width: 100%;
			/*  文字显示的行数 */
			overflow: hidden;
			/* 弹性盒模型 */
			-webkit-box-orient: vertical;
			/* 元素垂直居中 */
			-webkit-line-clamp: 1;
			/* 超出隐藏 */
		}

		.progress {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;

			text {
				font-size: 22rpx;
				color: #fff;
			}

			slider {
				width: 100%;
				margin: 0;
			}
		}
	}
}
</style>
